<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑图书信息</title>
  <script src="../../js/vue.min.js"></script>
  <script src="../../js/axios.min.js"></script>
  <style type="text/css">
    body{
      width: 50%;
      margin: auto;
    }
  label{
    display: inline-block;
    width: 200px;
    text-align: right;
    margin: 5px;
  }
  </style>
</head>
<body>
<div id="app">
  <label>编号</label><input v-model="book.id"><br>
  <label>书名</label><input v-model="book.bookname"><br>
  <label>出版社</label><input v-model="book.bookpress"><br>
  <label>出版时间</label><input v-model="book.pressdate"><br>
  <label>作者</label><input v-model="book.bookauthor"><br>
  <label>数量</label><input v-model="book.bookcount"><br>
  <label></label><button @click="save">保存</button>
</div>
<script>


  var vue = new Vue({
    el : "#app",
    data:{
     book:{},
    },
    created(){
      //JS BOM模型 地址对象
      var id = location.hash.substring(1);
      axios({
        url:"../../GetBookServlet.s",
        params:{
          id:id,

        }
      }).then(res=>{
        //axios 方法会把数据自动的转JSON对象
        this.book = res.data
      });
    },
    methods:{
        save(){
          axios({
            url:"../../UpdateBookServlet.s",
            params: this.book
          }).then(res=>{
            alert(res.data);
          });
        }
    }
  });
</script>

</body>
</html>